<template>
  <transition name="fade">
    <div class="popover__wrapper" v-show="visible">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="popover__content">
          <slot>
            <div class="no-data">
              <img src="~@/assets/images/no-data-address.png" class="no-img" alt="no-img">
              <p class="title">暂无数据</p>
            </div>
          </slot>
        </div>
      </el-scrollbar>
    </div>
  </transition>
</template>
<script>
export default {
  name: "index",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
}
</script>

<style lang="scss" scoped>
.popover__wrapper {
  width: 21.5rem;
  height: 31.5rem;
  background: url("~@/assets/images/fuzzy_detail_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 1.5rem 1rem 1rem 1rem;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 999;
  overflow: hidden;
  // todo: 调整滚动条样式
  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }

  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .no-data {
    width: 21.5rem;
    min-height: 31.5rem;
    padding: 1.5rem 1rem 1rem 1rem;
    box-sizing: border-box;

    .no-img {
      width: 7.95rem;
      height: 5.85rem;
      margin-left: 6rem;
      margin-top: 11rem;
    }

    .title {
      font-size: .8rem;
      text-align: center;
      line-height: 3rem;
      color: #fff;
    }
  }
}

@media screen and (min-width: 1366px) and (max-width: 1900px) {
  .popover__wrapper {
    right: 5%;
  }
}
</style>
